<!-- This partial include Add/Edit Owners and Success Modals -->

<!-- Add Owner Modal -->
<div class="modal modal-owner fade" id="addOwnerModal" tabindex="-1" data-ng-controller="AddOwnerController">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
        <div class="container">
          <div class="row">
            <div class="col-md-8 col-md-offset-2">
              <h1 class="sub-header">Add An Owner</h1>
              <em class="text-muted">Fill up pet owners basic information and contact details</em>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-body">
        <div class="container">
          <div class="row">
            <div class="col-md-4 col-md-offset-2">
              <div class="form-group">
                <label for="firstName">First Name</label>
                <input type="text" class="form-control" id="firstName" ng-model="owner.firstName">
              </div>
              <div class="form-group">
                <label for="lastName">Last Name</label>
                <input type="text" class="form-control" id="lastName" ng-model="owner.lastName">
              </div>
              <div class="form-group">
                <label for="profileImg">Profile Photo</label>
                <input type="file" class="form-control-file" id="profileImg">
              </div>
              <div class="form-group">
                <label for="occupation">Occupation</label>
                <input type="text" class="form-control" id="occupation" readonly>
              </div>
               <div class="form-group">
                <label for="company">Company</label>
                <input type="text" class="form-control" id="company" readonly>
              </div>
            </div>
            <div class="col-md-4">
              <div class="form-group">
                <label for="birthDate">Birth Date</label>
                <input type="text" class="form-control" id="birthDate" readonly>
              </div>
              <div class="form-group">
                <label for="address">Address</label>
                <input type="text" class="form-control" id="address" ng-model="owner.address">
              </div>
              <div class="form-group">
                <label for="city">City</label>
                <input type="text" class="form-control" id="city" ng-model="owner.city">
              </div>
              <div class="form-group">
                <label for="contactNumber">Contact Number</label>
                <input type="text" class="form-control" id="contactNumber" ng-model="owner.telephone">
              </div>
              <div class="form-group">
                <label for="email">Email</label>
                <input type="text" class="form-control" id="email" readonly>
              </div>
            </div>
            <div class="col-md-8 col-md-offset-2">
              <div class="form-group form-group-action">
                <button type="submit" class="btn btn-primary" data-toggle="modal" data-target="#addOwnerSuccessModal" data-dismiss="modal" aria-label="Close" data-ng-click="addOwner()">Add Owner</button>
                <button class="btn btn-link" class="close" data-dismiss="modal" aria-label="Close">Cancel</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Add Owner Success Modal -->
<div class="modal modal-owner fade" id="addOwnerSuccessModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
        <div class="container">
          <div class="row">
            <div class="col-md-8 col-md-offset-2">
              <h1 class="sub-header">Owner added successfully!</h1>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-body">
        <div class="container">
          <div class="row">
            <div class="col-md-8 col-md-offset-2">
              <div class="alert alert-success" role="alert">
                Well done! You've successfully added an a new owner.
              </div>
              <div class="form-group form-group-action">
                <!-- ##TODO: Should link to the proper owner details page -->
                <a href="owner_details.html" class="btn btn-primary">View owner's details</a>
                <button class="btn btn-link" data-dismiss="modal" aria-label="Close">Close</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Edit Owner Modal -->
<div class="modal modal-owner fade" id="editOwnerModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
        <div class="container">
          <div class="row">
            <div class="col-md-8 col-md-offset-2">
              <h1 class="sub-header">Edit Owner</h1>
              <em class="text-muted">Fill up pet owners basic information and contact details</em>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-body">
        <div class="container">
          <div class="row">
            <div class="col-md-4 col-md-offset-2">
              <div class="form-group">
                <label for="firstName">First Name</label>
                <input type="text" class="form-control" id="firstName" ng-model="currentOwner.firstName">
              </div>
              <div class="form-group">
                <label for="lastName">Last Name</label>
                <input type="text" class="form-control" id="lastName" ng-model="currentOwner.lastName">
              </div>
              <div class="form-group">
                <label for="profileImg">Profile Photo</label>
                <input type="file" class="form-control-file" id="profileImg">
              </div>
              <div class="form-group">
                <label for="occupation">Occupation</label>
                <input type="text" class="form-control" id="occupation" value="Accountant" readonly>
              </div>
               <div class="form-group">
                <label for="company">Company</label>
                <input type="text" class="form-control" id="company" value="Ledger Associates" readonly>
              </div>
            </div>
            <div class="col-md-4">
              <div class="form-group">
                <label for="birthDate">Birth Date</label>
                <input type="text" class="form-control" id="birthDate" value="04 Feb 1988" readonly>
              </div>
              <div class="form-group">
                <label for="address">Address</label>
                <input type="text" class="form-control" id="address" ng-model="currentOwner.address">
              </div>
              <div class="form-group">
                <label for="city">City</label>
                <input type="text" class="form-control" id="city" ng-model="currentOwner.city">
              </div>
              <div class="form-group">
                <label for="contactNumber">Contact Number</label>
                <input type="text" class="form-control" id="contactNumber" ng-model="currentOwner.telephone">
              </div>
              <div class="form-group">
                <label for="email">Email</label>
                <input type="text" class="form-control" id="email" value="maria.escobito@gmail.com" readonly>
              </div>
            </div>
            <div class="col-md-8 col-md-offset-2">
              <div class="form-group form-group-action">
                <button type="submit" class="btn btn-primary" data-toggle="modal" data-target="#editOwnerSuccessModal" data-dismiss="modal" aria-label="Close" ng-click="saveOwner()">Update Owner</button>
                <button class="btn btn-link" class="close" data-dismiss="modal" aria-label="Close">Cancel</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Edit Owner Success Modal -->
<div class="modal modal-owner fade" id="editOwnerSuccessModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
        <div class="container">
          <div class="row">
            <div class="col-md-8 col-md-offset-2">
              <h1 class="sub-header">Owner updated successfully!</h1>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-body">
        <div class="container">
          <div class="row">
            <div class="col-md-8 col-md-offset-2">
              <div class="alert alert-success" role="alert">
                Well done! You've successfully updated an owner.
              </div>
              <div class="form-group form-group-action">
                <a href="owner_details.html" class="btn btn-primary">View owner's details</a>
                <button class="btn btn-link" data-dismiss="modal" aria-label="Close">Close</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>